<template>
    <div class="box">
        <!-- 导航栏 -->
        <navlist title="首页"></navlist>
        <!-- 搜索框 -->
        <div style="display: flex;">
            <van-search disabled placeholder="请输入搜索关键词" style="width: 90%;" @click="router.push('/search')" />
            <van-icon name="list-switch" style="margin-top: 1.3rem;" size="26px" @click="router.push('/list')" />
        </div>
        <!-- nav导航 -->
        <van-tabs :active="active" animated>
            <van-tab title="推荐">
                <!-- 轮播图 -->
                <swiper :images="images"></swiper>
            </van-tab>
            <van-tab title="美食">美食页面</van-tab>
            <van-tab title="运动">运动页面</van-tab>
            <van-tab title="保健品">保健品页面</van-tab>
            <van-tab title="内衣">内衣页面</van-tab>
            <van-tab title="更多">更多页面</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from "vue"

import navlist from '@/components/navlist.vue';
import swiper from '@/components/swiper.vue';

import { swiperdataApi } from "@/api/api";

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

const active = ref(0);

// 轮播图
let images = ref({})
const swiperList = () => {
    swiperdataApi().then((res) => {
        // console.log(res)
        images.value = res.data.message
    })
}
swiperList()

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>